<template>
  <div>
    <el-card class="search-card">
      <el-form size="small" :inline="true" ref="formData" :model="formData" label-width="80px">
        <el-form-item label="查询类型" prop="type">
          <el-select
            placeholder="请选择活动区域"
            v-model="formData.type"
            @change="searchTypeChange"
          >
            <el-option
              v-for="item in enterpriseInfoTypes"
              :key="item.type"
              :label="item.interfaceName"
              :value="item.type"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业名称" prop="companyName">
          <el-input v-model="formData.companyName"  @focus="companyNameFocus" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-card">
      <basic-table
        :showSelectCol="false"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :tableHeight="460"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <el-row slot="content_context" type="flex" justify="start">
          <BtnRender :render="renderBtnsBar" />
        </el-row>
      </basic-table>
    </el-card>
    <TextareaDialog
      :visible.sync="textareaVisible"
      :title="'企业名称'"
      :content="formData.companyName"
      @getTextareaValue="getCompanyNames"
    />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import BasicTable from '@/components/supplier/BasicTable';
import TextareaDialog from '@supplier/components/TextareaDialog';
import BasicPage from '@/mixins/supplier/basicPage';
import EnterpriseInfo from '@/mixins/supplier/enterpriseInfo';
import { createExcelByExport, setAuthBtnId } from '@/utils/bizUtils';
import {
  getListColumnSettings,
  queryEnterpriseInfoListService
} from '@/api/supplier/components';
import {
  exportEnterpriseInfoService,
} from '@/api/supplier/management/enterpriseInfo';
import { getBtnsBar } from '@supplier/utils/btnsUtils';
import BtnRender from '@/components/JSXRender/BtnRender';

export default {
  mixins: [ BasicPage, EnterpriseInfo ],
  components: {
    BasicTable,
    TextareaDialog,
    BtnRender
  },
  data () {
    return {
      textareaVisible: false,
      formData: {
        type: '',
        companyName: '',
      },
    };
  },
  computed: {
    ...mapState('supplier/enterpriseInfo', ['enterpriseInfoTypes']),
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const btnsBar = [];
      if (this.supplierExportConfig.dataStatistics) {
        btnsBar.unshift({
          label: '导出',
          method: this.handleExport,
          loading: this.exportLoading,
          size: 'mini',
          type: 'primary',
          disabled: !this.tableInfo.list.length,
          hasAuth: true
        })
      }
      return getBtnsBar(h, btnsBar, this.showBtn);
    },
    // 获取弹窗公司名称
    getCompanyNames (name) {
      this.formData.companyName = name;
    },
    // 打开文本域
    companyNameFocus () {
      this.textareaVisible = true;
    },
    // 重置查询条件
    handleReset () {
      this.$refs['formData'].resetFields();
    },
    // 获取列表配置
    async getColSettings (menuId) {
      const { status, message, result = [] } = await getListColumnSettings({ menuId })
      if (status === '0') {
        this.setTableColumns(result)
      } else {
        this.$message.error(message)
      }
    },
    // 应用列表配置
    setTableColumns (data) {
      this.tableInfo.columns = data.filter(i => i.isShow).map(i => {
        return {
          title: i.label,
          key: i.prop,
          width: i.width
        }
      })
    },
    getSearchParams () {
      const { type, companyName } = this.formData;
      return {
        type,
        companyName: companyName && companyName.split('，')
      }
    },
    // 获取表格数据
    async getTableData () {
      this.tableInfo.list = [];
      if (Object.values(this.formData).some(i => !i)) {
        return this.$message.warning('查询类型与企业名称不可为空')
      }
      const { current, size } = this.pagination;
      setAuthBtnId()
      const res = await queryEnterpriseInfoListService(
        {
          ...this.getSearchParams(),
          current,
          size
        },
        state => { this.tableInfo.loading = state }
      )
      if (res) {
        const { records, total } = res.result;
        this.tableInfo.list = records;
        this.pagination.total = total;
      }
    },
    // 查询类型变更
    searchTypeChange (val) {
      const { companyName } = this.formData;
      const menuId = this.enterpriseInfoTypes.find(item => item.id == val).columnId
      this.getColSettings(menuId)
      this.tableInfo.list = [];
      if (companyName) {
        this.getTableData()
      }
    },
    // 导出
    async handleExport () {
      const res = await exportEnterpriseInfoService(
        {
          ...this.getSearchParams(),
          current: 1,
          size: 5000
        },
        state => { this.exportLoading = state }
      )
      if (res) {
        createExcelByExport({ excelTitle: '企业信息', res })
      }
    },
  }
};
</script>
